<template>
  <div class="main">
    <Header></Header>
    <div
      class="content"
      v-loading="loading"
      element-loading-text="加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <div class="headBox">
        <div class="div1 flex1">
          <div>
            <span>今日采样数</span>
            <span>{{ sampledNumsCount.sampledDayNum }}</span>
          </div>
          <div>
            <span>累计采样数</span>
            <span>{{ sampledNumsCount.sampledNum }}</span>
            <span>个</span>
          </div>
        </div>
        <div class="div1 flex2">
          <div>
            <span>今日检测人数</span>
            <span>{{ userSumsCount.usersDayNum }}</span>
          </div>
          <div>
            <span>累计检测人数</span>
            <span>{{ userSumsCount.usersNum }}</span>
            <span>人</span>
          </div>
        </div>
        <div class="flex3">
          <div class="f3-one">
            <span>{{ count.orgNum }}</span>
            <span>检测机构数</span>
          </div>
          <div class="f3-one">
            <span>{{ count.siteNum }}</span>
            <span>检测样点数</span>
          </div>
          <div class="f3-one">
            <span>{{ count.grantNum }}</span>
            <span>采样人员</span>
          </div>
        </div>
        <div class="div1 flex1">
          <div>
            <span>检测机构今日签收样本数</span>
            <span>{{ signForNumsCount.signDayNum }}</span>
          </div>
          <div>
            <span>累计签收样本数</span>
            <span>{{ signForNumsCount.signNum }}</span>
            <span>个</span>
          </div>
        </div>

        <div class="div2">
          <el-carousel direction="vertical" :autoplay="true">
            <el-carousel-item
              v-for="(item, index) in positiveNegative"
              :key="index"
            >
              <div class="negative">
                <template v-if="index == 0">
                  <div>
                    <span>今日录入阴性结果数</span>
                    <span>{{ item.yinResultDayNum }}</span>
                  </div>
                  <div>
                    <span>累计结果阴性总数</span>
                    <span>{{ item.yinResultNum }}</span>
                  </div>
                </template>
                <template v-if="index == 1">
                  <div>
                    <span>今日录入阳性结果数</span>
                    <span>{{ item.yangResultDayNum }}</span>
                  </div>
                  <div>
                    <span>累计结果阳性总数</span>
                    <span>{{ item.yangResultNum }}</span>
                  </div>
                </template>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      <div class="bodyBox">
        <div class="body-left">
          <div class="yujing">
            <div class="jinggao">
              <div>
                <img src="../assets/gonggaoicon.png" alt="" />
              </div>
              <div>
                <span>今日预警条码数</span>
                <span>{{ earlyWarningDataCount.conDayNum }},</span>
                <span>其中试管未送达</span
                ><span>{{ earlyWarningDataCount.dayNotDelivered }},</span
                ><span>未在限定时间内出核酸结果</span
                ><span>{{ earlyWarningDataCount.dayNotResult }}</span
                ><span>截止目前存在预警条码数</span
                ><span>{{ earlyWarningDataCount.conNum }}</span>
              </div>
            </div>
            <div class="yuanyin">
              <div class="title">
                <img src="../assets/jingbaoicon.png" alt="" />

                <span>预警原因分析</span>
              </div>
              <div class="echart-bg">
                <v-chart
                  :options="echart2"
                  class="echartsBox1"
                  :autoresize="true"
                  @click="chartPEvents"
                />
              </div>
            </div>
          </div>
          <div class="tongji">
            <div class="title">
              <img src="../assets/caiyangicon.png" alt="" />
              <span>采样点统计</span>
              <div
                :class="type == 'all' ? 'btnOn' : '' + 'btn-one'"
                style="margin: 0 20px 0 80px"
                @click="addGetList('all')"
              >
                检测总量
              </div>
              <div
                :class="type == 'only' ? 'btnOn' : '' + 'btn-one'"
                @click="addGetList('only')"
              >
                今日新增
              </div>
            </div>
            <div class="progress_list">
              <div
                class="bar"
                v-for="(item, index) in countyInspectionList"
                :key="index"
              >
                <div
                  :class="
                    index == '0'
                      ? 'first-child1'
                      : index == '1'
                      ? 'first-child2'
                      : index == '2'
                      ? 'first-child3'
                      : '' + 'first-child4'
                  "
                >
                  {{ index + 1 }}
                </div>
                <div class="name">{{ item.name }}</div>
                <div class="bar_one">
                  <div class="bar_two" :style="'width:' +  (maxNum1 == 0? 0 : (item.num / maxNum1 * 100)) + '%'"></div>
                </div>
                <span>{{ item.num }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="body-map">
          <div class="map-one">
            <div class="wanchenglv1">
              <span>检测完成率</span
              ><span>{{ completionRateCount.rate.replace(/%/g, "") }}</span>
            </div>
            <!--  <div class="wanchenglv2">
              <span>累计检测完成率</span
              ><span>{{ completionRateCount.dayRate.replace(/%/g, "") }}</span>
            </div> -->
          </div>
          <div class="map-two">
            <img
              src="../assets/map.png"
              width="451"
              height="590"
              border="0"
              usemap="#Map"
              id="mapImg"
            />
            <map name="Map" id="Map">
              <area
                shape="poly"
                :coords="item.coords"
                v-for="(item, index) in areaList"
                :key="index"
                :img="item.img"
                :name="item.name"
              />
              <!--  :title="item.name"  -->
            </map>
            <!-- <div class="select1 none">
              <img src="../assets/select.png" alt="">
             </div>
              <div class="select2 none">
              <img src="../assets/select.png" alt="">
             </div>
              <div class="select3 none">
              <img src="../assets/select.png" alt="">
             </div>
              <div class="select4 none">
              <img src="../assets/select.png" alt="">
             </div>
              <div class="select5 none">
              <img src="../assets/select.png" alt="">
             </div>
              <div class="select6 none">
              <img src="../assets/select.png" alt="">
             </div>
              <div class="select7 none">
              <img src="../assets/select.png" alt="">
             </div>
              <div class="select8 none">
              <img src="../assets/select.png" alt="">
             </div>
              <div class="select9 none">
              <img src="../assets/select.png" alt="">
             </div> -->
            <!-- <div class="select">
              <img src="../assets/select.png" alt="">
             </div>
              <div class="select">
              <img src="../assets/select.png" alt="">
             </div> -->
            <div class="fuchuang">
              <div class="fu-title">{{ countyName }}</div>
              <div class="fu-tent">
                <div class="dian1"></div>
                <span>当日新增检测人数</span
                ><span>{{ mapFrom.checkDayCount }}</span>
              </div>
              <div class="fu-tent">
                <div class="dian2"></div>
                <span>昨日新增检测人数</span
                ><span>{{ mapFrom.checkYesterdayCount }}</span>
              </div>
              <div class="fu-tent">
                <div class="dian3"></div>
                <span>累计检测人数</span><span>{{ mapFrom.checkCount }}</span>
              </div>
            </div>
            <div class="gaoxing">
              <span>章贡高新区</span>
            </div>
			<div class="gaoxing1">
			  <span>章江街道</span>
			</div>
          </div>
        </div>
        <div class="body-right">
          <div class="right-one">
            <div class="title">
              <img src="../assets/jieguoicon.png" alt="" />

              <span>检测机构检测结果情况</span>
            </div>
            <v-chart :options="echart1" class="echartsBox" :autoresize="true" />
          </div>
          <div class="right-two">
            <div class="title">
              <img src="../assets/jigouicon.png" alt="" />
              <span>检测机构</span>
              <div
                :class="type2 == 'all' ? 'btnOn2' : '' + 'btn-one2'"
                style="margin: 0 20px 0 80px"
                @click="addGetList2('all')"
              >
                检测总量
              </div>
              <div
                :class="type2 == 'only' ? 'btnOn2' : '' + 'btn-one2'"
                @click="addGetList2('only')"
              >
                今日新增
              </div>
            </div>
            <div class="progress_list">
              <div
                class="bar2"
                v-for="(item, index) in organizationList"
                :key="index"
              >
                <div class="bar2-top">
                  <div
                    :class="
                      index == '0'
                        ? 'first-child1'
                        : index == '1'
                        ? 'first-child2'
                        : index == '2'
                        ? 'first-child3'
                        : '' + 'first-child4'
                    "
                  >
                    {{ index + 1 }}
                  </div>
                  <div class="name2">
                    {{ item.orgName }}
                  </div>
                  <span>{{ item.num }}</span>
                </div>
                <div class="bar2-bottom">
                  <div class="bar_one2">
                    <div
                      class="bar_two2"
                      :style="'width:' + (maxNum2 == 0? 0 : (item.num / maxNum2 * 100)) + '%'"
                    ></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog
      :title="dialogName"
      :visible.sync="dialogVisible"
      width="1140px"
      class="dialog"
    >
      <div class="table">
        <el-table
          v-loading="loading"
          element-loading-text="加载中..."
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          :data="codeWarning"
          row-class-name="trRow"
          header-row-class-name="hrRow"
          @cell-mouse-enter="cellcellMouseEnter"
        >
          <el-table-column
            property="tubeCode"
            label="条码编号"
          ></el-table-column>
          <el-table-column property="siteName" label="采样点"></el-table-column>
          <el-table-column
            property="collectTime"
            label="采样时间"
          ></el-table-column>
          <template v-if="reason == '未在限定时间内出示核酸结果'">
            <el-table-column
              property="signName"
              label="检测机构"
            ></el-table-column>
            <el-table-column
              property="signTime"
              label="签收时间"
            ></el-table-column>
          </template>
        </el-table>
      </div>
      <div class="pageBox">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          highlight-current-row
          :page-size="pageSize"
          layout="prev, pager, next, jumper"
          :total="total"
          background
          prev-text="上一页"
          next-text="下一页"
        >
        </el-pagination>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 动态生成路由代码
// @route('/index','index')
import Header from "@/components/header/header.vue";
// import $ from 'jquery'
export default {
  components: {
    Header,
  },
  data() {
    return {
      loading: false,
      orgId: "",
      positiveNegative: [], //轮播图
      count: {}, //头部检测机构数据
      type: "all",
      type2: "all",
      organizationList: [], //检测机构
      countyInspectionList: [], //采样点统计的数据
      maxNum1: 0,
      maxNum2: 0,
      sampledNumsCount: {}, //今日采样点和累计
      userSumsCount: {}, //今日检测人数和累计
      resultEntryYinNumsCount: {}, //检测阴性和累计
      signForNumsCount: {}, //检测机构检测数和累计人数
      countyName: "",
      earlyWarningDataCount: {}, //喇叭预警数据
      completionRateCount: {
        rate: "",
        dayRate: "",
      },
      mapdata: [],
      mapFrom: {},
      areaList: [
        {
          coords:
            "109,37,108,31,96,18,92,21,90,18,81,16,74,21,57,21,50,24,41,24,41,35,33,33,27,27,21,30,13,33,16,44,13,49,7,53,6,58,9,65,16,63,22,56,22,51,27,48,33,51,33,56,36,65,42,66,44,69,51,74,61,78,66,69,73,78,83,82,90,76,93,80,98,83,105,90,108,91,116,98,127,103,137,110,142,114,151,120,159,122,162,126,160,133,160,141,170,145,174,145,177,150,179,157,184,161,183,169,191,176,184,180,182,192,177,201,177,207,183,210,180,212,183,219,188,220,205,215,223,194,220,171,220,151,225,140,247,110,250,104,266,87,263,80,238,67,204,66,183,61,173,54,171,33,168,25,164,9,159,9,157,4,144,5,137,5,133,13,138,20,130,26,125,26,116,24,114,32",
          name: "水西镇",
          img: "shuixizhen",
        },
        {
          coords:
            "246,109,242,118,234,129,226,141,221,147,224,191,228,203,242,215,263,228,294,245,322,252,342,251,334,245,329,241,332,235,330,229,325,226,322,227,318,218,319,206,315,203,318,198,311,191,311,179,296,176,289,181,282,185,276,184,276,188,273,185,271,179,276,169,269,158,258,151,259,138,270,125,269,120,250,112",
          name: "水东镇",
          img: "shuidongzhen",
        },
        {
          coords:
            "223,195,217,199,211,208,209,212,212,219,218,228,224,229,234,227,241,220,245,214,242,209,235,203,229,198,227,195",
          name: "解放街道",
          img: "jeifangjeidao",
        },
        {
          coords:
            "213,226,212,229,212,233,217,236,223,242,234,241,244,241,252,238,260,234,264,229,260,223,252,220,250,212,248,211,243,216,237,222,233,226,228,227,224,227,218,226",
          name: "赣江街道",
          img: "gamjiamgjiedao",
        },
        {
          coords:
            "205,216,198,217,189,220,181,225,175,233,174,242,176,250,191,257,210,257,225,257,225,244,219,237,208,233,213,226,214,220,211,216",
          name: "南外街道",
          img: "nanwaijiedao",
        },
        {
          coords:
            "223,243,223,257,243,281,253,276,256,271,261,264,272,258,273,265,276,268,283,264,284,256,293,255,301,249,290,242,267,229,259,235,251,239,235,240,228,240",
          name: "东外街道",
          img: "dongwaijiedao",
        },
        {
          coords:
            "176,249,171,255,172,265,165,267,168,272,178,272,183,269,191,270,189,274,185,277,185,285,175,295,165,303,160,314,171,328,187,342,212,330,232,315,239,313,248,307,251,297,247,280,227,255,189,255,179,248",
          name: "水南街道",
          img: "shuinanjiedao",
        },
        {
          coords:
            "303,248,296,254,283,259,279,269,267,262,259,267,249,276,248,291,252,297,261,298,264,304,269,299,273,312,278,334,286,343,304,350,313,344,320,340,326,342,344,341,362,341,367,353,379,363,392,377,409,385,413,371,422,361,442,346,447,328,453,322,444,318,433,318,429,311,424,302,429,284,433,269,438,256,447,245,448,236,448,226,436,231,425,226,424,219,414,220,402,210,393,217,379,229,364,239,349,245,341,248,326,250,313,250,304,247",
          name: "沙河镇",
          img: "shahezhen",
        },
        {
          coords:
            "238,312,223,320,210,330,193,334,186,339,196,362,185,373,173,372,163,375,154,389,153,401,147,410,151,417,157,422,158,430,168,437,170,445,172,456,175,466,172,475,175,487,177,502,186,515,198,528,217,518,226,512,226,520,235,530,239,541,258,550,268,536,274,532,280,549,305,569,325,561,324,543,336,550,354,530,367,522,385,508,376,495,384,491,395,496,397,487,392,474,376,477,367,474,359,465,358,453,342,459,337,449,359,429,378,419,388,403,393,393,394,379,390,364,376,353,365,340,349,340,327,346,313,340,307,349,297,342,285,343,277,337,273,325,272,312,272,298,259,297,252,298,248,303",
          name: "沙石镇",
          img: "shashizhen",
        },
      ],
      echart2: {
        tooltip: {
          trigger: "item",
        },

        legend: {
          orient: "vertical",
          icon: "circle",
          itemWidth: 6,
          itemHeight: 6,
          right: 60,
          bottom: 10,
          itemGap: 10,

          textStyle: {
            color: "#fff",
            fontSize: 12,
          },
        },
        color: ["#1250c0", "#07b8bc"],
        series: [
          {
            type: "pie",
            radius: "60%",
            center: ["30%", "45%"],
            data: [
              { value: "", name: "未在规定时间内出核酸结果" },
              { value: "", name: "试管未送达预警" },
            ],
            label: {
              show: false,
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
          {
            legend: {
              show: false,
            },
            name: "",
            type: "pie",
            radius: ["69%", "70%"],
            center: ["30%", "45%"],
            itemStyle: {
              color: "#999",
            },
            label: {
              show: false,
              normal: {
                formatter: "{d}%",
                color: "rbga(49,255,255,0.4)",
                show: false,
              },
              emphasis: {
                show: false,
                color: "rbga(49,255,255,1)",
              },
            },
            labelLine: {
              show: false,
              normal: {
                show: false,
              },
            },
            data: [
              {
                value: 335,
                name: "",
              },
            ],
            hoverAnimation: false,
          },
        ],
      },
      echart1: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",

            textStyle: {
              color: "#05294D",
            },
          },
          formatter: function (params) {
            let str = "";
            for (let i = 0; i < params.length; i++) {
              if (i == 0) {
                str += `${params[i].name}<br/>${params[i].seriesName}：<span>${params[0].data}</span><br/>`;
                continue;
              }
              if (i == 1) {
                str += `${params[i].seriesName}：<span>${params[1].data}</span><br/>`;
                continue;
              }
              if (i == 2) {
                str += `${params[i].seriesName}：<span>${params[2].data}</span><br/>`;
                continue;
              }
              str += `${params[i].seriesName}：<span>${params[i].data}</span>%<br/>`;
            }
            return str;
          },
          padding: [20, 20, 20, 20],
        },
        grid: {
          borderWidth: 0,
          top: "25%",
          left: "6%",
          right: "10%",
          bottom: "25%",
          textStyle: {
            color: "#fff",
          },
        },
        legend: {
          top: "0%",
          right: "2%",
          itemWidth: 6,
          itemHeight: 6,
          textStyle: {
            fontSize: "12",
            color: "#FFFFFF",
          },
          icon: "circle",
        },
        dataZoom: [
          {
            type: "slider",
            /* type:'inside', */
            /*  show:true, */
            height: 7,
            start: 0,
            end: 30,
            xAxisIndex: [0],
            bottom: 15,
            showDetail: false,
            dataBackground: {
              areaStyle: {
                /*  color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "red", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "blue", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                }, */
                color: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [
                    {
                      offset: 0,
                      color: "red", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "blue", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
                // 纹理填充
                /*  color: {
                  image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
                  repeat: "repeat", // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
                }, */
              },
            },
          },
        ],
        xAxis: [
          {
            type: "category",
            axisLine: {
              lineStyle: {
                color: "rgba(98,93,114,0.6)",
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitArea: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              color: "#cccccc",
              fontSize: 14,
              // 坐标轴刻度标签换行处理
              formatter: function (params) {
                var newParamsName = ""; // 最终拼接成的字符串
                var paramsNameNumber = params.length; // 实际标签的个数
                var provideNumber = 5; // 每行能显示的字的个数
                var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
                /**
                 * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                 */
                // 条件等同于rowNumber>1
                if (paramsNameNumber > provideNumber) {
                  /** 循环每一行,p表示行 */
                  for (var p = 0; p < rowNumber; p++) {
                    var tempStr = ""; // 表示每一次截取的字符串
                    var start = p * provideNumber; // 开始截取的位置
                    var end = start + provideNumber; // 结束截取的位置
                    // 此处特殊处理最后一行的索引值
                    if (p == rowNumber - 1) {
                      // 最后一次不换行
                      tempStr = params.substring(start, paramsNameNumber);
                    } else {
                      // 每一次拼接字符串并换行
                      tempStr = params.substring(start, end) + "\n";
                    }
                    newParamsName += tempStr; // 最终拼成的字符串
                  }
                } else {
                  // 将旧标签的值赋给新标签
                  newParamsName = params;
                }
                //将最终的字符串返回
                return newParamsName;
              },
            },
            textStyle: {
              fontSize: 12,
            },
            data: [],
          },
        ],
        yAxis: [
          {
            type: "value",
            nameTextStyle: {
              color: "#eee",
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(98,93,114,0.6)",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#eee",
              },
            },
            minInterval: 1,
          },
          {
            min: 0,
            max: 100,
            position: "right",
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              color: "#eee",
              formatter: "{value} %",
            },
          },
        ],
        series: [
          {
            name: "签收数",
            type: "bar",
            // "stack": "总量",
            barMaxWidth: 35,
            barGap: "0%",
            itemStyle: {
              normal: {
                color: "#00f9f9",
              },
            },
            data: [],
          },
          {
            name: "阳性结果数",
            type: "bar",
            // "stack": "总量",
            barMaxWidth: 35,
            /*  barGap: "10%", */
            itemStyle: {
              normal: {
                color: "#e9346d",
              },
            },
            data: [],
          },
          {
            name: "阴性结果数",
            type: "bar",
            // "stack": "总量",
            barMaxWidth: 35,
            /* barGap: "10%", */
            itemStyle: {
              normal: {
                color: "#44d8a8",
              },
            },
            data: [],
          },
          {
            name: "检测完成率",
            type: "line",
            symbolSize: 0,
            symbol: "circle",
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                color: "#ffcc00",
                barBorderRadius: 0,
              },
            },
            data: [],
          },
        ],
      },
      dialogVisible: false,
      dialogName: "",
      currentPage: 1,
      total: 0,
      pageSize: 5,
      codeWarning: [],
      loading: false,
      reason: "",
    };
  },
  async created() {
    try {
      await this.isLogin()
        .then((res) => {
          localStorage.setItem("userName", res.data);
        })
        .catch(() => {
          localStorage.setItem("userName", "超级管理员");
        });
    } catch {
      console.log("登录失败");
    }
    setTimeout(() => {
      this.loading = false;
    }, 500);
    this.countyInspection();
    this.basicDataCount();
    this.sampledNums();
    this.userSums();
    /*  this.resultEntryYinNums(); */
    this.signForNums();
    this.organization();
    this.earlyWarningData();
    this.completionRate();
    this.resultsOfRestingOrgan();
    this.mapData();
    Promise.all([
      this.getResultEntryYinNums(),
      this.getResultEntryYingNums(),
    ]).then((res) => {
      this.positiveNegative = res;
	  console.log('this.positiveNegative=',this.positiveNegative)
    });
  },
  methods: {
    resize() {
      this.$refs.echart1.resize();
      this.$refs.echart2.resize();
    },
    cellcellMouseEnter(row, column, cell, event) {
      // console.log(row, column, cell, event);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.getCodeWarning();
    },
    chartPEvents(e) {
      console.log(e);
      if (e.data.name == "试管未送达预警") {
        this.reason = "试管未送达";
      }
      if (e.data.name == "未在规定时间内出核酸结果") {
        this.reason = "未在限定时间内出示核酸结果";
      }
      this.dialogName = e.data.name + "明细";
      this.getCodeWarning();
      this.dialogVisible = true;
    },
    getCodeWarning() {
      this.loading = true;
      this.$axios({
        url: "/home/nucleic/nucleicDetectTube/codeWarning",
        method: "post",
        needAuth: true,
        data: {
          reason: this.reason,
          length: this.pageSize,
          start: (this.currentPage - 1) * this.pageSize,
        },
      })
        .then((res) => {
          this.codeWarning = res.data;
          this.total = Number(res.recordsFiltered);
        })
        .finally(() => {
          setTimeout(() => {
            this.loading = false;
          }, 50);
        });
    },

    async equestAll() {},
    isLogin() {
      return new Promise((reslove, reject) => {
        this.$axios({
          url: "/api/isLogin",
          method: "post",
          needAuth: true,
        }).then((res) => {
          if (res.code == 200) {
            reslove(res);
          } else {
            reject();
          }
        });
      });
    },

    moreareaList(item) {
      console.log(item);
    },
    //采样点切换事件
    addGetList(type) {
      this.type = type;
      this.countyInspection();
    },
    //检测机构切换事件
    addGetList2(type2) {
      this.type2 = type2;
      this.organization();
    },
    //地图数据对接
    mapData() {
      this.$axios({
        url: "/home/nucleic/mapData",
        method: "post",
        needAuth: true,
        headers: {
          "Content-Type": "application/json;charset=utf-8", // application/json
        },
      }).then((res) => {
        if (res.code == 200) {
          this.mapdata = res.data;
        }
      });
    },
    //采样点数据对接
    countyInspection() {
      this.$axios({
        url: "/home/nucleic/countyInspection",
        method: "post",
        needAuth: true,
        data: {
          type: this.type,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.maxNum1 = 0;
          res.data.forEach((item) => {
            this.maxNum1 += Number(item.num);
          });
          this.countyInspectionList = res.data;
        }
      });
    },

    //检测机构数据对接
    organization() {
      console.log(this.type2);
      this.$axios({
        url: "/home/nucleic/organization",
        method: "post",
        needAuth: true,
        data: {
          type: this.type2,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.maxNum2 = 0;
          res.data.forEach((item) => {
            this.maxNum2 += Number(item.num);
            console.log(this.maxNum2)
          });
          this.organizationList = res.data;
        }
      });
    },
    //头部检测数据
    basicDataCount() {
      this.$axios({
        url: "/home/nucleic/basicDataCount",
        method: "post",
        needAuth: true,
        headers: {
          "Content-Type": "application/json;charset=utf-8", // application/json
        },
      }).then((res) => {
        if (res.code == 200) {
          this.count = res.data;
          console.log(this.count);
        }
      });
    },
    //今日采样数和累计数
    sampledNums() {
      this.$axios({
        url: "/home/nucleic/sampledNums",
        method: "post",
        needAuth: true,
        headers: {
          "Content-Type": "application/json;charset=utf-8", // application/json
        },
      }).then((res) => {
        if (res.code == 200) {
          this.sampledNumsCount = res.data;
          console.log(this.sampledNumsCount);
        }
      });
    },
    //今日检测人数和累计数
    userSums() {
      this.$axios({
        url: "/home/nucleic/userSums",
        method: "post",
        needAuth: true,
        headers: {
          "Content-Type": "application/json;charset=utf-8", // application/json
        },
      }).then((res) => {
        if (res.code == 200) {
          this.userSumsCount = res.data;
          console.log(this.userSumsCount);
        }
      });
    },
    //检测机构签收样本数和累计数
    signForNums() {
      this.$axios({
        url: "/home/nucleic/signForNums",
        method: "post",
        needAuth: true,
        headers: {
          "Content-Type": "application/json;charset=utf-8", // application/json
        },
      }).then((res) => {
        if (res.code == 200) {
          this.signForNumsCount = res.data;
          console.log(this.signForNumsCount);
        }
      });
    },
    //检测阴性数和累计数
    /* resultEntryYinNums() {
      this.$axios({
        url: "/home/nucleic/resultEntryYinNums",
        method: "post",
        needAuth: true,
        headers: {
          "Content-Type": "application/json;charset=utf-8",
        },
      }).then((res) => {
        if (res.code == 200) {
          this.resultEntryYinNumsCount = res.data;
          console.log(this.resultEntryYinNumsCount);
        }
      });
    }, */
    getResultEntryYinNums() {
      //今日录入阴性
      return new Promise((reslove, reject) => {
        this.$axios({
          url: "/home/nucleic/resultEntryYinNums",
          method: "post",
          needAuth: true,
          data: {
            orgId: this.orgId,
          },
        }).then((res) => {
          if (res.code == 200) {
            reslove(res.data);
          } else {
            reject();
          }
        });
      });
    },
    getResultEntryYingNums() {
      //今日录入阳性
      return new Promise((reslove, reject) => {
        this.$axios({
          url: "/home/nucleic/resultEntryYingNums",
          method: "post",
          needAuth: true,
          data: {
            orgId: this.orgId,
          },
        }).then((res) => {
          if (res.code == 200) {
            reslove(res.data);
          } else {
            reject();
          }
        });
      });
    },
    //喇叭图标预警处数据对接
    earlyWarningData() {
      this.$axios({
        url: "/home/nucleic/earlyWarningData",
        method: "post",
        needAuth: true,
        headers: {
          "Content-Type": "application/json;charset=utf-8",
        },
      }).then((res) => {
        if (res.code == 200) {
          this.earlyWarningDataCount = res.data;
          this.echart2.series[0].data[0].value = res.data.notResult;
          this.echart2.series[0].data[1].value = res.data.notDelivered;
        }
      });
    },

    //检测完成率数据对接
    completionRate() {
      this.$axios({
        url: "/home/nucleic/completionRate",
        method: "post",
        needAuth: true,
        headers: {
          "Content-Type": "application/json;charset=utf-8",
        },
      }).then((res) => {
        if (res.code == 200) {
          this.completionRateCount = res.data;
        }
      });
    },
    //检测机构检测结果情况数据对接
    resultsOfRestingOrgan() {
      this.$axios({
        url: "/home/nucleic/resultsOfRestingOrgan",
        method: "post",
        needAuth: true,
        headers: {
          "Content-Type": "application/json;charset=utf-8",
        },
      }).then((res) => {
        if (res.code == 200) {
          var orgName = [],
            signCount = [],
            yinCount = [],
            yangCount = [],
            completionRate = [];
          res.data.forEach((item, index) => {
            orgName.push(item.orgName);
            yangCount.push(item.yangCount);
            yinCount.push(item.yinCount);
            signCount.push(item.signCount);
            completionRate.push(item.completionRate.replace(/%/g, ""));
          });
          this.echart1.xAxis[0].data = orgName;
          this.echart1.series[1].data = yangCount;
          this.echart1.series[2].data = yinCount;
          this.echart1.series[0].data = signCount;
          this.echart1.series[3].data = completionRate;
        }
      });
    },
  },
  mounted() {
    // alert('111')
    var that = this;

    $("area").each(function () {
      $(this)
        .mouseover(function (e) {
          var img = $(this).attr("img");
          $("#mapImg").attr("src", require("../assets/" + img + ".png"));
        })
        .mouseout(function () {
          $("#mapImg").attr("src", require("../assets/map.png"));
        })
        .mousemove(function (e) {});
      $(this).click(function () {});
    });

    $(".gaoxing").mouseover(function (e) {
        var $y = 360;
        var $x = 10;
        that.countyName = "章贡高新区";
        that.mapdata.map((item, index) => {
          if (item.country == that.countyName) {
            that.mapFrom = item;
          }
        });
        $(".fuchuang").css({
          opacity: "1",
          top: e.offsetY + $y + "px",
          left: e.offsetX + $x + "px",
        });
      })
      .mouseout(function (e) {
        $(".fuchuang").css({ opacity: "0" });
      })
      .mousemove(function (e) {
        var $y = 360;
        var $x = 10;
        $(".fuchuang").css({
          opacity: "1",
          top: e.offsetY + $y + "px",
          left: e.offsetX + $x + "px",
        });
      });
	  $(".gaoxing1").mouseover(function (e) {
	      var $y = 360;
	      var $x = 10;
	      that.countyName = "章江街道";
	      that.mapdata.map((item, index) => {
	        if (item.country == that.countyName) {
	          that.mapFrom = item;
	        }
	      });
	      $(".fuchuang").css({
	        opacity: "1",
	        top: e.offsetY + $y + "px",
	        left: e.offsetX + $x + "px",
	      });
	    })
	    .mouseout(function (e) {
	      $(".fuchuang").css({ opacity: "0" });
	    })
	    .mousemove(function (e) {
	      var $y = 360;
	      var $x = 10;
	      $(".fuchuang").css({
	        opacity: "1",
	        top: e.offsetY + $y + "px",
	        left: e.offsetX + $x + "px",
	      });
	    });
    //  $(".select1").mouseover(function (e) {
    //  $(this).css({ opacity: "1" });
    // })
    //   $(".select2").mouseover(function (e) {
    //  $(this).css({ opacity: "1" });
    // })
    //   $(".select3").mouseover(function (e) {
    //  $(this).css({ opacity: "1" });
    // })
    //   $(".select4").mouseover(function (e) {
    //  $(this).css({ opacity: "1" });
    // })
    //   $(".select5").mouseover(function (e) {
    //  $(this).css({ opacity: "1" });
    // })
    //  $(".select6").mouseover(function (e) {
    //  $(this).css({ opacity: "1" });
    // })
    //  $(".select7").mouseover(function (e) {
    //  $(this).css({ opacity: "1" });
    // })
    //  $(".select8").mouseover(function (e) {
    //  $(this).css({ opacity: "1" });
    // })
    //  $(".select9").mouseover(function (e) {
    //  $(this).css({ opacity: "1" });
    // })
    $("area").each(function () {
      $(this)
        .mouseover(function (e) {
          var $y = 60;
          var $x = 60;
          that.countyName = $(this).attr("name");
          that.mapdata.map((item, index) => {
            if (item.country == that.countyName) {
              that.mapFrom = item;
            }
          });
          // if( that.countyName=='沙石镇'){
          //  $(".select1").css({ opacity: "1" })
          //   }
          //     if( that.countyName=='沙河镇'){
          //  $(".select2").css({ opacity: "1" })
          //   }
          //     if( that.countyName=='水南镇'){
          //  $(".select3").css({ opacity: "1" })
          //   }
          //     if( that.countyName=='水西镇'){
          //  $(".select4").css({ opacity: "1" })
          //   }
          //     if( that.countyName=='水东镇'){
          //  $(".select5").css({ opacity: "1" })
          //   }
          //     if( that.countyName=='南外街道'){
          //  $(".select6").css({ opacity: "1" })
          //   }
          //     if( that.countyName=='东外街道'){
          //  $(".select7").css({ opacity: "1" })
          //   }
          //     if( that.countyName=='赣江街道'){
          //  $(".select8").css({ opacity: "1" })
          //   }
          //     if( that.countyName=='解放街道'){
          //  $(".select9").css({ opacity: "1" })
          //   }
          $(".fuchuang").css({
            opacity: "1",
            top: e.offsetY + $y + "px",
            left: e.offsetX + $x + "px",
          });
        })
        .mouseout(function (e) {
          // $(".none").css({ opacity: "0" })
          $(".fuchuang").css({ opacity: "0" });
        })
        .mousemove(function (e) {
          var $y = 60;
          var $x = 60;
          $(".fuchuang").css({
            opacity: "1",
            top: e.offsetY + $y + "px",
            left: e.offsetX + $x + "px",
          });
        });
    });
  },
};
</script>

<style scoped lang="less">
/deep/.el-table__row {
  // background: red !important;
  &:hover {
    // background-color: red !important;
    color: black !important;
  }
}
.main {
  background-size: 100% auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;

  .dialog {
    /deep/.el-dialog {
      border: 3px solid #31b6eb;
      background: #020f17;
      padding: 30px 30px;
    }
    /deep/.el-dialog__title {
      color: #fff !important;
      font-size: 18px;
    }
    /deep/.el-dialog__close {
      color: #fff;
      font-size: 30px;
    }
    /deep/.hrRow {
      th {
        background: #042231;
        color: #fff;
        font-size: 18px;
        text-align: center;
        border: 1px solid #135bb0;
      }
    }
    /deep/.trRow {
      background: #020f17;
      color: #fff;
      font-size: 16px;

      &:hover {
        // background: red !important;
      }
      td {
        text-align: center;
        border: 1px solid #135bb0;
        &:hover {
          // background: red !important;
        }
      }
    }
    /deep/.el-table {
      &::before {
        background-color: #135bb0;
      }
    }

    /deep/.el-table__empty-block {
      background: #020f17;
      span {
        color: #fff;
      }
      border: 1px solid #135bb0;
      box-sizing: border-box;
    }

    .pageBox {
      margin-top: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      /deep/.el-pagination {
        display: flex;
        align-items: center;
      }
      /deep/.btn-prev {
        height: 40px;
        width: 112px;
        background: transparent;
        border: 2px solid #d8d8d8;
        border-radius: 4px;
      }
      /deep/.btn-next {
        height: 40px;
        width: 112px;
        background: transparent;
        border: 2px solid #d8d8d8;
        border-radius: 4px;
      }
      /deep/.el-pager {
        li {
          height: 44px;
          width: 44px;
          background: transparent;
          border: 2px solid #d8d8d8;
          border-radius: 4px;
          color: #fff;
          line-height: 40px;
        }
        .active {
          border: 2px solid #017cc2;
          color: #fff;
        }
      }
      /deep/.el-pagination__jump {
        height: 44px;
      }
      /deep/.el-input__inner {
        background: transparent;
        border: 2px solid #d8d8d8;
        border-radius: 4px;
        height: 44px;
      }
    }
  }

  .content {
    color: #fff;
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0 30px;
    box-sizing: border-box;
    padding-bottom: 20px;
    .headBox {
      flex: 1;
      display: flex;
      justify-content: space-between;
      overflow: hidden;
      .div1 {
        flex: 1;
        width: 291px;
        height: 100px;
        padding-left: 40px;
        color: #f0f0f0;
        font-size: 16px;
        display: flex;
        flex-direction: column;
        margin-right: 30px;
        margin-top: 20px;
        background-color: rgba(41, 49, 64, 0.2);
        border: solid 1px rgba(20, 206, 214, 0.2);
        div {
          flex: 1;
          display: flex;
          align-items: center;
          &:nth-child(1) {
            span {
              &:nth-child(1) {
                width: 110px;
              }
              &:nth-child(2) {
                color: #00f9f9;
                font-size: 32px;
              }
            }
          }
          &:nth-child(2) {
            span {
              &:nth-child(1) {
                width: 110px;
              }
              &:nth-child(2) {
                color: #44d8a8;
                font-size: 24px;
              }
              &:nth-child(3) {
                color: #44d8a8;
                font-size: 14px;
                margin-left: 4px;
                margin-top: 10px;
              }
            }
          }
        }
      }
      .div2 {
        flex: 1;
        width: 291px;
        height: 100px;
        padding-left: 40px;
        color: #f0f0f0;
        font-size: 16px;
        display: flex;
        flex-direction: column;
        margin-right: 30px;
        margin-top: 20px;
        background-color: rgba(41, 49, 64, 0.2);
        border: solid 1px rgba(20, 206, 214, 0.2);
        .negative {
          height: 102px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          div {
            // flex: 1;
            display: flex;
            align-items: center;
            &:nth-child(1) {
              span {
                &:nth-child(1) {
                  width: 110px;
                }
                &:nth-child(2) {
                  color: #00f9f9;
                  font-size: 32px;
                  &::after {
                    content: "个";
                    color: #00f9f9;
                    font-size: 16px;
                    margin-left: 4px;
                  }
                }
              }
            }
            &:nth-child(2) {
              span {
                &:nth-child(1) {
                  width: 110px;
                }
                &:nth-child(2) {
                  color: #44d8a8;
                  font-size: 24px;
                  &::after {
                    content: "个";
                    color: #44d8a8;
                    font-size: 14px;
                    margin-left: 4px;
                  }
                }
              }
            }
          }
        }
      }
      .flex3 {
        flex: 2;
        width: 291px;
        height: 100px;
        padding-left: 40px;
        color: #f0f0f0;
        font-size: 16px;
        display: flex;
        margin-right: 30px;
        margin-top: 20px;
        background-color: rgba(41, 49, 64, 0.2);
        border: solid 1px rgba(20, 206, 214, 0.2);
        div {
          margin-left: 50px;
          margin-top: 20px;
          align-items: center;

          &:nth-child(-n + 3) {
            display: flex;
            flex-direction: column;
            span {
              &:nth-child(1) {
                color: #00f9f9;
                font-size: 32px;
                width: 110px;
                &::after {
                  content: "个";
                  color: #00f9f9;
                  font-size: 16px;
                  margin-left: 4px;
                }
              }

              &:nth-child(2) {
                color: #f0f0f0;
                font-size: 14px;
                width: 110px;
              }
            }
          }
        }
      }
      .flex5 {
        flex: 1;
        display: flex;
      }
      .flex1 {
        flex: 1;
      }

      .flex2 {
        flex: 1;
        div {
          &:nth-child(2) {
            span {
              &:nth-child(1) {
                width: 110px;
              }
              &:nth-child(2) {
                color: #44d8a8;
                font-size: 24px;
                &:nth-child(3) {
                  color: #44d8a8;
                  font-size: 14px;
                  margin-left: 4px;
                  margin-top: 10px;
                }
              }
            }
          }
        }
      }
      :last-child {
        margin-right: 0;
      }
    }
    .bodyBox {
      flex: 5;
      display: flex;
      overflow: hidden;
      justify-content: space-between;
      .body-left {
        flex: 1;
        display: flex;
        flex-direction: column;
        .yujing {
          flex: 3;
          display: flex;
          flex-direction: column;
          .jinggao {
            flex: 1;
            margin-top: 20px;
            display: flex;
            text-align: center;
            > div {
              &:nth-child(1) {
                img {
                  width: 29px;
                  height: 28px;
                }
              }
              &:nth-child(2) {
                height: 100%;
                margin-left: 10px;
                display: flex;
                font-size: 14px;
                flex-wrap: wrap;
                color: #f0f0f0;
                span {
                  &:nth-child(2) {
                    color: red;
                    margin-left: 4px;
                  }
                }
              }
              &:nth-child(2) {
                height: 100%;
                margin-left: 10px;
                display: flex;
                font-size: 14px;
                flex-wrap: wrap;
                color: #f0f0f0;
                span {
                  &:nth-child(2) {
                    color: red;
                    margin-left: 4px;
                  }
                  &:nth-child(4) {
                    color: red;
                    margin-left: 4px;
                  }
                  &:nth-child(6) {
                    color: red;
                    margin-left: 4px;
                  }
                  &:nth-child(8) {
                    color: red;
                    margin-left: 4px;
                  }
                }
              }
            }
          }
          .yuanyin {
            flex: 4;
            display: flex;
            flex-direction: column;

            .title {
              color: #f0f0f0;
              display: flex;
              margin-top: 10px;
              img {
                width: 31px;
                height: 28px;
                margin-right: 10px;
              }
              span {
                align-items: center;
                font-size: 18px;
              }
            }
            overflow: hidden;
            width: 100%;
            margin-top: 20px;
            /*  position: relative; */
            .echart-bg {
              display: flex;
              flex: 1;
              width: 407px;
              height: 184px;
              // background: url(../assets/yuan.png) no-repeat left 21% top 5px;
              // background-size: 150px 150px;
              position: relative;
              .echartsBox1 {
                display: flex;
                flex: 1;
                position: absolute;
                height: 100%;
                width: 100%;
              }
            }
          }
        }
        .tongji {
          flex: 4;
          display: flex;
          flex-direction: column;
          margin-top: 10px;
          color: #fff;
          overflow: hidden;
          .title {
            color: #f0f0f0;
            display: flex;
            padding-bottom: 20px;
            img {
              width: 31px;
              height: 28px;
              margin-right: 10px;
            }
            span {
              align-items: center;
              font-size: 18px;
            }
          }
        }
      }
      .body-map {
        flex: 2;
        display: flex;
        flex-direction: column;
        .map-one {
          -webkit-user-select: none;
          -moz-user-select: none;
          -o-user-select: none;
          user-select: none;
          width: 420px;
          height: 141px;
          background: url("../assets/bgjiance.png") no-repeat;
          background-size: 100% 100%;
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          margin: 0 auto;
          .wanchenglv1 {
            display: flex;
            text-align: center;
            span {
              &:nth-child(1) {
                margin-left: 29px;
                margin-top: 40px;
                width: 90px;
                font-size: 18px;
                color: #f0f0f0;
              }
              &:nth-child(2) {
                margin-left: 60px;
                margin-top: 20px;
                font-size: 66px;
                background-image: -webkit-linear-gradient(
                  bottom,
                  #eeba64,
                  #ffefc4
                );
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                font-weight: bold;
                line-height: 60px;
                &::after {
                  content: "%";
                  font-size: 33px;
                  background-image: -webkit-linear-gradient(
                    bottom,
                    #eeba64,
                    #ffefc4
                  );
                  -webkit-background-clip: text;
                  -webkit-text-fill-color: transparent;
                }
              }
            }
          }
          /*  .wanchenglv2 {
            display: flex;
            span {
              &:nth-child(1) {
                margin-left: 29px;
                margin-bottom: 19px;
                width: 150px;
                font-size: 18px;
                color: #f0f0f0;
              }
              &:nth-child(2) {
                margin-left: 30px;
                margin-top: 0;
                font-size: 28px;
                background-image: -webkit-linear-gradient(
                  bottom,
                  #eeba64,
                  #ffefc4
                );
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                font-weight: bold;
                line-height: 25px;
                &::after {
                  content: "%";
                  font-size: 14px;
                  background-image: -webkit-linear-gradient(
                    bottom,
                    #eeba64,
                    #ffefc4
                  );
                  -webkit-background-clip: text;
                  -webkit-text-fill-color: transparent;
                }
              }
            }
          } */
        }
        .map-two {
          flex: 7;
          margin: 0 auto 20px auto;
          position: relative;
          area {
            cursor: pointer;
          }
          .select1 {
            display: flex;
            position: absolute;
            bottom: 143px;
            left: 177px;
            width: 34px;
            height: 114px;
            opacity: 0;
            // transition: opacity 1s;
          }
          .select2 {
            display: flex;
            position: absolute;
            bottom: 270px;
            left: 277px;
            width: 34px;
            height: 114px;
            opacity: 0;
            // transition: opacity 1s;
          }
          .select3 {
            display: flex;
            position: absolute;
            bottom: 290px;
            left: 137px;
            width: 34px;
            height: 114px;
            opacity: 0;
            // transition: opacity 1s;
          }
          .select4 {
            display: flex;
            position: absolute;
            bottom: 480px;
            left: 120px;
            width: 34px;
            height: 114px;
            opacity: 0;
            // transition: opacity 1s;
          }
          .select5 {
            display: flex;
            position: absolute;
            bottom: 380px;
            left: 190px;
            width: 34px;
            height: 114px;
            opacity: 0;
            // transition: opacity 1s;
          }
          .select6 {
            display: flex;
            position: absolute;
            bottom: 343px;
            left: 130px;
            width: 34px;
            height: 114px;
            opacity: 0;
            // transition: opacity 1s;
          }
          .select7 {
            display: flex;
            position: absolute;
            bottom: 323px;
            left: 177px;
            width: 34px;
            height: 114px;
            opacity: 0;
            // transition: opacity 1s;
          }
          .select8 {
            display: flex;
            position: absolute;
            bottom: 350px;
            left: 165px;
            width: 34px;
            height: 114px;
            opacity: 0;
            // transition: opacity 1s;
          }
          .select9 {
            display: flex;
            position: absolute;
            bottom: 365px;
            left: 155px;
            width: 34px;
            height: 114px;
            opacity: 0;
            // transition: opacity 1s;
          }
          .fuchuang {
            display: flex;
            flex-direction: column;
            width: 174px;
            height: 148px;
            background-color: rgba(60, 60, 60, 0.7);
            border: solid 1px rgba(20, 206, 214, 0.2);
            position: absolute;
            bottom: 93px;
            left: 27px;
            opacity: 0;
            transition: opacity 1s;
            .fu-title {
              margin-top: 15px;
              margin-left: 10px;
            }
            .fu-tent {
              display: flex;
              align-items: center;
              font-size: 14px;

              .dian1 {
                width: 14px;
                height: 14px;
                background: #00f9f9;
                border-radius: 16px;
                margin-top: 15px;
                margin-left: 10px;
              }
              .dian2 {
                width: 14px;
                height: 14px;
                background: #fef000;
                border-radius: 16px;
                margin-top: 15px;
                margin-left: 10px;
              }
              .dian3 {
                width: 14px;
                height: 14px;
                background: #e559a8;
                border-radius: 16px;
                margin-top: 15px;
                margin-left: 10px;
              }
              span {
                margin-top: 15px;
                margin-left: 5px;
                &:nth-child(2) {
                  font-size: 14px;
                }
              }
            }
          }
          .gaoxing {
            display: flex;
            width: 98px;
            height: 28px;
            background-color: #00344d;
            border: solid 1px rgba(20, 206, 214, 0.2);
            position: absolute;
            bottom: 23px;
            left: -40px;
            border-radius: 14px;
            transition: opacity 1s;
            cursor: pointer;
            span {
              margin-top: 3px;
              margin-left: 15px;
              font-size: 14px;
              color: #f0f0f0;
            }
          }
		  .gaoxing1 {
		    display: flex;
		    width: 98px;
		    height: 28px;
		    background-color: #00344d;
		    border: solid 1px rgba(20, 206, 214, 0.2);
		    position: absolute;
		    bottom: 23px;
		    left: 80px;
		    border-radius: 14px;
		    transition: opacity 1s;
		    cursor: pointer;
		    span {
		      margin-top: 3px;
		      margin-left: 15px;
		      font-size: 14px;
		      color: #f0f0f0;
		    }
		  }
        }
      }
      .body-right {
        flex: 1;
        display: flex;
        flex-direction: column;
        .right-one {
          flex: 4;
          display: flex;
          flex-direction: column;
          .title {
            color: #f0f0f0;
            display: flex;
            margin-top: 1px;
            img {
              width: 31px;
              height: 28px;
              margin-right: 10px;
            }
            span {
              align-items: center;
              font-size: 18px;
            }
          }
          width: 100%;
          margin-top: 2px;

          position: relative;
          .echartsBox {
            height: 100%;
            width: 100%;
          }
        }
        .right-two {
          flex: 4;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          .title {
            color: #f0f0f0;
            display: flex;
            padding-bottom: 20px;
            img {
              width: 31px;
              height: 28px;
              margin-right: 10px;
            }
            span {
              align-items: center;
              font-size: 18px;
            }
          }
        }
      }

      .btn-one {
        width: 88px;
        height: 28px;
        border-radius: 14px;
        text-align: center;
        line-height: 28px;
        background-color: #1f3270;
        cursor: pointer;
      }
      .btnOn {
        width: 88px;
        height: 28px;
        border-radius: 14px;
        text-align: center;
        line-height: 28px;
        cursor: pointer;
        background-image: linear-gradient(90deg, #105aff 0%, #15edf8 100%),
          linear-gradient(#495ee7, #495ee7);
        background-blend-mode: normal, normal;
      }
      .btn-one2 {
        width: 88px;
        height: 28px;
        border-radius: 14px;
        text-align: center;
        line-height: 28px;
        background-color: #1f3270;
        cursor: pointer;
      }
      .btnOn2 {
        width: 88px;
        height: 28px;
        border-radius: 14px;
        text-align: center;
        line-height: 28px;
        cursor: pointer;
        background-image: linear-gradient(90deg, #22bfd8 0%, #43d8a9 100%),
          linear-gradient(#26d1d4, #26d1d4);
        background-blend-mode: normal, normal;
      }
      .bar {
        display: flex;
        margin-bottom: 20px;
        .first-child1 {
          width: 14px;
          height: 14px;
          background-image: linear-gradient(90deg, #ec7777 0%, #f4152a 100%),
            linear-gradient(#1c95f2, #1c95f2);
          background-blend-mode: normal, normal;
          border-radius: 14px;
          text-align: center;
          line-height: 14px;
          font-size: 12px;
          margin-right: 5px;
          color: #fff;
        }
        .first-child2 {
          width: 14px;
          height: 14px;
          background-image: linear-gradient(-90deg, #fd4107 0%, #ffb490 100%),
            linear-gradient(#1c95f2, #1c95f2);
          background-blend-mode: normal, normal;
          border-radius: 50%;
          text-align: center;
          line-height: 14px;
          font-size: 12px;
          margin-right: 5px;
          color: #fff;
        }

        .first-child3 {
          width: 14px;
          height: 14px;
          background-image: linear-gradient(-90deg, #f68d0c 0%, #fedaad 100%),
            linear-gradient(#1c95f2, #1c95f2);
          background-blend-mode: normal, normal;
          border-radius: 50%;
          text-align: center;
          line-height: 14px;
          margin-right: 5px;
          font-size: 12px;
          color: #fff;
        }
        .first-child4 {
          width: 14px;
          height: 14px;
          background-image: linear-gradient(-90deg, #4480fb 0%, #71dfff 100%),
            linear-gradient(#1c95f2, #1c95f2);
          background-blend-mode: normal, normal;
          border-radius: 50%;
          text-align: center;
          line-height: 14px;
          font-size: 12px;
          margin-right: 5px;
          color: #fff;
        }
        .name {
          width: 38%;
          font-size: 14px;
        }
        .bar_one {
          width: 58%;
          height: 12px;
          background-color: #293948;
          border-radius: 6px;
          margin: 4px 0 0 8px;
          position: relative;

          div {
            width: auto;
            height: 12px;
            background-image: linear-gradient(90deg, #105aff 0%, #15edf8 100%),
              linear-gradient(#61d5bb, #61d5bb);
            background-blend-mode: normal, normal;
            border-radius: 6px;
            position: absolute;
          }
        }
        span {
          width: 14px;
          font-size: 12px;
          margin-top: 3px;
        }
      }
      .bar2 {
        display: flex;
        flex-direction: column;
        margin-bottom: 20px;
        .bar2-top {
          display: flex;
          flex: 1;
          .first-child1 {
            width: 14px;
            height: 14px;
            background-image: linear-gradient(90deg, #ec7777 0%, #f4152a 100%),
              linear-gradient(#1c95f2, #1c95f2);
            background-blend-mode: normal, normal;
            border-radius: 50%;
            text-align: center;
            line-height: 14px;
            font-size: 12px;
            margin-right: 5px;
            color: #fff;
          }
          .first-child2 {
            width: 14px;
            height: 14px;
            background-image: linear-gradient(-90deg, #fd4107 0%, #ffb490 100%),
              linear-gradient(#1c95f2, #1c95f2);
            background-blend-mode: normal, normal;
            border-radius: 50%;
            text-align: center;
            line-height: 14px;
            font-size: 12px;
            margin-right: 5px;
            color: #fff;
          }

          .first-child3 {
            width: 14px;
            height: 14px;
            background-image: linear-gradient(-90deg, #f68d0c 0%, #fedaad 100%),
              linear-gradient(#1c95f2, #1c95f2);
            background-blend-mode: normal, normal;
            border-radius: 50%;
            text-align: center;
            line-height: 14px;
            margin-right: 5px;
            font-size: 12px;
            color: #fff;
          }
          .first-child4 {
            width: 14px;
            height: 14px;
            background-image: linear-gradient(-90deg, #4480fb 0%, #71dfff 100%),
              linear-gradient(#1c95f2, #1c95f2);
            background-blend-mode: normal, normal;
            border-radius: 14px;
            text-align: center;
            line-height: 14px;
            font-size: 12px;
            margin-right: 5px;
            color: #fff;
          }
          .name2 {
            width: 38%;
            font-size: 14px;
            flex: 8;
          }
          span {
            font-size: 14px;
            color: #f0f0f0;
            flex: 1;
          }
        }
        .bar2-bottom {
          display: flex;
          flex: 1;
          .bar_one2 {
            width: 95%;
            height: 12px;
            background-color: #051e27;
            border-radius: 6px;
            margin: 4px 0 0 8px;
            position: relative;

            div {
              width: auto;
              height: 12px;
              background-image: linear-gradient(90deg, #22bfd8 0%, #43d8a9 100%),
                linear-gradient(#e9346d, #e9346d);
              background-blend-mode: normal, normal;
              border-radius: 6px;
              position: absolute;
              top: 0;
              left: 0;
            }
          }
        }
        /*  .bar_one2 {
          width: 60%;
          height: 12px;
          background-color: #051e27;
          border-radius: 6px;
          margin: 4px 0 0 8px;
          position: relative;

          div {
            width: auto;
            height: 12px;
            background-image: linear-gradient(90deg, #22bfd8 0%, #43d8a9 100%),
              linear-gradient(#e9346d, #e9346d);
            background-blend-mode: normal, normal;
            border-radius: 6px;
            position: absolute;
            top: 0;
            left: 0;
          }
        } */
      }
      .progress_list {
        overflow-y: scroll;
        padding-right: 20px;
        overflow-x: hidden;
        &::-webkit-scrollbar {
          width: 5px;
          height: 57px;
          background-color: #5db0ff;
        }
        &::-webkit-scrollbar-track {
          border-radius: 3px;
          background-color: #094380;
        }
        &::-webkit-scrollbar-thumb {
          border-radius: 3px;
          background: #5db0ff;
        }
      }
    }
  }
}
</style>
